<template>
  <div>
    <van-dropdown-menu active-color="#21b97a">
      <van-dropdown-item title="区域" ref="item1">
        <van-picker show-toolbar :columns="columns" ref="quyu">
          <template slot="columns-bottom">
            <div class="action">
              <van-button @click="close1">取消</van-button>
              <van-button type="primary" @click="quyulist()">确认</van-button>
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="item2">
        <van-picker show-toolbar :columns="rentTypes" ref="fs">
          <template slot="columns-bottom">
            <div class="action">
              <van-button @click="close2">取消</van-button>
              <van-button type="primary" @click="fslist">确认</van-button>
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="item3">
        <van-picker show-toolbar :columns="prices" ref="zhuj">
          <template slot="columns-bottom">
            <div class="action">
              <van-button @click="close3">取消</van-button>
              <van-button type="primary" @click="zhujlist">确认</van-button>
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item4" class="mmm">
        <template #default>
          <div class="box">
            <div class="box1">
              <span>户型</span>
            </div>
            <van-grid :column-num="2" :gutter="10">
              <van-grid-item
                :text="item.label"
                @click="add($event)"
                v-for="(item,index) in roomType"
                :key="index"
                ref="button"
              />
            </van-grid>
          </div>
          <div class="box">
            <div class="box1">
              <span>朝向</span>
            </div>
            <div class="box2">
              <van-grid :column-num="2" :gutter="10">
                <van-grid-item
                  :text="item.label"
                  @click="add($event,item.label)"
                  v-for="(item,index) in oriented"
                  :key="index"
                  ref="button"
                />
              </van-grid>
            </div>
          </div>
          <div class="box">
            <div class="box1">
              <span>楼层</span>
            </div>
            <van-grid :column-num="2" :gutter="10">
              <van-grid-item
                :text="item.label"
                @click="add($event,item.label)"
                v-for="(item,index) in floor"
                :key="index"
                ref="button"
              />
            </van-grid>
          </div>
          <div class="box">
            <div class="box1">
              <span>房屋亮点</span>
            </div>
            <van-grid :column-num="2" :gutter="10">
              <van-grid-item
                :text="item.label"
                @click="add($event,item.label)"
                v-for="(item,index) in characteristic"
                :key="index"
                ref="button"
              />
            </van-grid>
          </div>
          <div class="action">
            <van-button @click="close4">取消</van-button>
            <van-button type="primary" @click="shaXuan">确认</van-button>
          </div>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import { getcondition, getquyu } from '@/api/map'
export default {
  name: 'VueHaowuMukh',
  props: {
    list: {
      typeof: () => []
    }
  },
  data () {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      areachildren: [],
      rentType: [],
      price: [],
      price1: [],
      roomType: [],
      rentType1: [],
      oriented: [],
      floor: [],
      characteristic: [],
      utr: '',
      newlist: [],
      area: '',
      subway: '',
      rent: 'null',
      newprice: 'null',
      newArr: [],
      sxuan: [],
      end: [],
      qchucfu: [],
      hhh: '',
      res: []
    }
  },
  async created () {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    this.getConition()
    this.$toast.success({
      message: '加载成功！',
      duration: 1
    })
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle()
    },
    async getConition () {
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        const res = await getcondition({
          id: hot.value
        })
        this.areachildren.push(res.body.area, res.body.subway)
        // console.log(res.body)
        this.roomType = res.body.roomType
        this.oriented = res.body.oriented
        this.floor = res.body.floor
        this.characteristic = res.body.characteristic
        this.price = res.body.price
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
        const res = await getcondition({
          id: city
        })
        console.log(res)
        this.areachildren.push(res.body.area, res.body.subway)
        // console.log(res.body)
        this.roomType = res.body.roomType
        this.oriented = res.body.oriented
        this.floor = res.body.floor
        this.characteristic = res.body.characteristic
        this.price = res.body.price
      }
    },
    add (e) {
      // console.log(val)
      this.utr = e.target.classList[4]
      if (this.utr === undefined) {
        e.target.classList.add('utr')
        this.newArr.push(e.target.innerText)
        this.sxuan.push(...this.characteristic, ...this.floor, ...this.oriented, ...this.roomType)
        this.sxuan = Array.from(new Set(this.sxuan))
        // console.log(this.sxuan)
        this.newArr.forEach((ele) => {
        // eslint-disable-next-line array-callback-return
          this.sxuan.filter((item) => {
            if (item.label === ele) {
              this.end.push(item.value)
              return item.value
            }
          })
          this.qchucfu = Array.from(new Set(this.end))
        // console.log(this.end)
        // console.log(res)
        })
      } else {
        e.target.classList.remove('utr')
        // console.log(this.sxuan)
        // console.log(this.qchucfu)
      }
      // console.log(e.target.innerText)

      // console.log(this.$refs.button)
    },
    close1 () {
      this.$refs.item1.toggle(false)
    },
    close2 () {
      this.$refs.item2.toggle(false)
    },
    close3 () {
      this.$refs.item3.toggle(false)
    },
    close4 () {
      this.$refs.item4.toggle(false)
    },
    async zhujlist () {
      this.$refs.item3.toggle(false)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        city = hot.value
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
      }
      const arr = this.$refs.zhuj.getValues()
      // console.log(arr)
      // console.log(arr[0])
      // eslint-disable-next-line array-callback-return
      const newprice = this.price.filter((item) => {
        if (item.label === arr[0]) {
          return item
        }
      })
      this.newprice = newprice[0].value
      const res = await getquyu({
        id: city,
        area: this.area,
        subway: this.subway,
        rentType: this.rent,
        price: this.newprice,
        more: this.hhh
      })
      // console.log(res)
      this.newlist = res.body.list
      this.$emit('input', this.newlist)
      this.$toast.success({
        message: '加载成功！',
        duration: 1
      })
      // console.log(newprice)
    },
    async fslist () {
      this.$refs.item2.toggle(false)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        city = hot.value
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
      }
      const arr = this.$refs.fs.getValues()
      // console.log(arr)
      if (arr[0] === '不限') {
        const res = await getquyu({
          id: city,
          area: this.area,
          subway: this.subway,
          rentType: this.rent,
          price: this.newprice,
          more: this.hhh
        })
        this.rent = 'null'
        this.newlist = res.body.list
        // console.log(res)
      } else if (arr[0] === '合租') {
        const res = await getquyu({
          id: city,
          area: this.area,
          subway: this.subway,
          rentType: this.rent,
          price: this.newprice,
          more: this.hhh
        })
        this.rent = 'false'
        this.newlist = res.body.list
        console.log(res)
      } else {
        const res = await getquyu({
          id: city,
          area: this.area,
          subway: this.subway,
          rentType: this.rent,
          price: this.newprice,
          more: this.hhh
        })
        this.rent = 'true'
        this.newlist = res.body.list
      }
      this.$emit('input', this.newlist)
      this.$toast.success({
        message: '加载成功！',
        duration: 1
      })
    },
    async quyulist () {
      this.$refs.item1.toggle(false)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const arr = this.$refs.quyu.getValues()
      // console.log(arr)
      if (arr[0].text === '区域') {
        if (arr[2].value === 'null') {
          this.area = arr[1].value
        } else if (arr[1].value === 'null') {
          this.area = arr[0].value
        } else {
          this.area = arr[2].value
        }
        this.subway = ''
      } else {
        if (arr[2].value === 'null') {
          this.subway = arr[1].value
        } else if (arr[1].value === 'null') {
          this.subway = arr[0].value
        } else {
          this.subway = arr[2].value
        }
        this.area = ''
      }
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        city = hot.value
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
      }
      if (arr[0].text === '区域') {
        const res = await getquyu({
          id: city,
          area: this.area,
          subway: this.subway,
          rentType: this.rent,
          price: this.newprice,
          more: this.hhh
        })
        // console.log(res)
        this.newlist = res.body.list
        this.$emit('input', this.newlist)
      } else {
        const res = await getquyu({
          id: city,
          area: this.area,
          subway: this.subway,
          rentType: this.rent,
          price: this.newprice,
          more: this.hhh
        })
        // console.log(res)
        this.newlist = res.body.list
        this.$emit('input', this.newlist)
      }

      this.$toast.success({
        message: '加载成功！',
        duration: 1
      })
      // console.log(this.$refs.quyu.getValues())
    },
    async shaXuan () {
      this.$refs.item4.toggle(false)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        city = hot.value
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
      }
      const str = JSON.stringify(this.qchucfu).replace('[', '')
      // eslint-disable-next-line no-useless-escape
      this.hhh = str.replace(']', '').replace(/\"/g, '')
      const res = await getquyu({
        id: city,
        area: this.area,
        subway: this.subway,
        rentType: this.rent,
        price: this.newprice,
        more: this.hhh
      })
      // console.log(res)
      this.newlist = res.body.list
      this.$emit('input', this.newlist)

      this.$toast.success({
        message: '加载成功！',
        duration: 1
      })
    }
  },
  computed: {
    columns () {
      let ele = JSON.stringify(this.areachildren).replace(/"label"/g, '"text"')
      ele = ele.replace(
        /"value":"null"/,
        '"value":"null","children":[{"text":"不限","value":"null"}]'
      )
      return JSON.parse(ele)
    },
    prices () {
      this.price.forEach((item) => {
        // console.log(item.label)
        this.price1.push(item.label)
      })
      return this.price1
    },
    rentTypes () {
      this.roomType.forEach((item) => {
        // console.log(item)
        this.rentType1.push(item.label)
      })
      return this.rentType1
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-picker__cancel {
  display: none;
}
/deep/ .van-picker__confirm {
  display: none;
}
/deep/ .van-picker__columns {
  margin-top: -153px;
  height: 200px;
}
.action {
  display: flex;
  width: 100%;
  button {
    flex: 1;
  }
}
/deep/ .active {
  width: 200px;
  height: 500px;
  margin-left: 50px;
}
/deep/.box {
  width: 100%;
  .box1 {
    display: flex;
    span {
      margin-top: 10px;
      margin-left: 15px;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 14px;
    }
  }
}
/deep/ .van-popup--top {
  float: right;
  max-width: 70%;
  margin-left: 60px;
}
/deep/.utr {
  border: 1px solid #21b97a;
  background-color: #defaef;
}
/deep/ .van-grid-item__content {
  padding: 3px;
}
</style>
